﻿<?php include COMMON_PATH.'/share/header.html' ?>
    <script src="/share/js/sdk/TcPlayer-2.2.1.js"></script>
    <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
    <link rel="stylesheet" href="/index/js/swiper/swiper.min.css">
    <link rel="stylesheet" href="/share/css/live.css">
    <cross-domain-policy>
        <allow-access-from domain="*.qq.com" secure="false"/>
    </cross-domain-policy>
</head>
<body>
<div class="main">
    <!--直播wrap-->
    <div id="play_video" class="common-wrap" style="width:100%; overflow: hidden; display: none; ">
        <h3 class="share-title" style="">
            LiveTraining
        </h3>
        <section class="top">
            <div class="top-left-wrap">
                <img class="host-avatar" src="<?=$info['avatar']?>"  onerror = "imgNoFind(this)">
                <article class="info">
                    <span class="host-name"><?=$info['nickname']?></span>
                    <span class="fans-num"><?=$info['click']?></span>在线
                </article>
            </div>
            <span class="host-sid">已开播：<i id="live_time"></i></span>
        </section>

        <!--聊天内容-->
        <div class="comments-wrap">
            <ul id="video_sms_list" class="comments-list-wrap">

            </ul>
        </div>
        <span class="play-btn"></span>
        <?php if($info['annex']):?>
        <span class="icon-ppt icon-open"></span>
        <?php endif;?>
        <!--底部聊天输入框-->
        <div class="footer">
            <div class="tool-wrap">
                <span class="talk talk-click" id="js-start-talk"></span>
            </div>
            <div class="talk-box" id="js-talk-ipt-wrap" style="display: none;">
                <input type="text" id="js-talk-ipt" class="talk-input" placeholder="点击这输入文字" value="" maxlength="200"><a href="javascript:;" class="talk-btn js-talk-btn" id="js-send-talk-btn">发送</a>
            </div>
        </div>
    </div>
    <?php if($info['annex']):?>
    <div class="swiper-out-wrap">
        <div class="slide-wrap swiper-container swiper-container-horizontal">
            <div class="swiper-wrapper">
                <?php foreach($info['annex'] as $v):?>
                <div class="swiper-slide swiper-slide-active" style="background: url('<?=$v?>') center no-repeat; background-size: contain;"></div>
                <?php endforeach;?>
            </div>
            <div class="swiper-pagination swiper-pagination-fraction"><span class="swiper-pagination-current"></span>/<span class="swiper-pagination-total"></span></div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>
    </div>
    <?php endif;?>

    <!--弹窗-->
    <div id="pass-in" style=" display:none; width: 100%; height: 100%; line-height: 100%; text-align: center; vertical-align: middle; background: rgb(136, 136, 136); position: absolute;top: 0; left: 0; z-index: 1002;">
        <span style="position: absolute;top: 50%;left: 0;width: 100%; color: #fff;"></span>
    </div>

</div>
<script type="text/javascript" src="/index/js/swiper/swiper.min.js"></script>
<script src="/share/js/jquery.min.js"></script>
<script src="/share/js/common.js"></script>
<script src="/share/js/mui.min.js"></script>
<script src="/share/js/sdk/webim.js"></script>
<script src="/share/js/sdk/json2.js"></script>
<script src="/share/js/jrrpc.js"></script>
<script src="/share/js/im_visit.js"></script>

<script>

    var my_swiper = new Swiper('.swiper-container', {
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        pagination: '.swiper-pagination',
        observer:true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents:true, //修改swiper的父元素时，自动初始化swiper
//      autoplay:'1500',
        loop:true,
        paginationType: 'fraction',
        onInit: function(swiper){
        }
    });

    var avChatRoomId = "<?=$info['channel']?>";//群组ID
    function getLogInfo (){
        //调用后台接口得到用户im信息以及视频状态
        var loginInfo = {
            'sdkAppID': "<?=$user['sdkAppID']?>",       //用户所属应用id,必填
            'appIDAt3rd': "<?=$user['sdkAppID']?>",     //用户所属应用id，必填
            'accountType': "<?=$user['accountType']?>", //用户所属应用帐号类型，必填
            'identifier': "<?=$user['udid']?>",         //当前用户ID,必须是否字符串类型，选填
            'identifierNick': "<?=$user['nickname']?>", //当前用户昵称，选填
            'userSig': "<?=$user['tim']?>",         //当前用户身份凭证，必须是字符串类型，选填
            'headurl': "<?=$user['avatar']?>",      //当前用户默认头像，选填
            'llid': "<?=$info['llid']?>",
            'avChatRoomId': "<?=$info['channel']?>",  //群组ID
            'my_swiper':my_swiper,
            'roomId':'llid'
        };
        return loginInfo;
    }
    var loginInfo = getLogInfo();

    function callbackIm(){
        //    调用im的方法
        // onSendMsg(1);
    }

    var password = "<?=$info['password']?>";

    sessionStorage.sharepassword = 2;

    var live_status = "<?=$info['status']?>"; // 2 直播，9.回放 ，5.结束

    var play_time = "<?=$info['play']?>";
    if(play_time!=''){
        iService.showTiming(play_time,$('#live_time')[0]); //开播时间
    }

    if(live_status==2||live_status==9){
        if(password!=0){
            $('#pass-in').show();
            function successFunc(data){
                console.log(data);
                if(data.code==200){
                    $('#pass-in').hide();
                    if(live_status==2)
                    {
                        imMsg(loginInfo,callbackIm);
                    }
                }else
                if(data.code == 400){
                    mui.alert(data.data.message,' ',function(){
                        sessionStorage.sharepassword = '1'; //1代表由于密码错误而刷新
                        checkPassword();
                        //window.location.href = location.href.split('&')[0]+'&time='+((new Date()).getTime());
                    });
                    return false;
                }
            }

            function checkPassword(){
                mui.prompt('','请输入观看密码','请输入观看密码',['确认'],function(e){
                    if (e.index == 0) {
                        var param = {
                            postData:'share/live/password',
                            data:{
                                llid:"<?=$info['llid']?>",
                                password:$('input[type=password]').val()
                            }
                        };
                        $.JsonRpc(param, successFunc);
                    }
                },'div');
                document.querySelector('.mui-popup-input input').autocomplete='new-password';
                document.querySelector('.mui-popup-input input').type='password';
                $(document.querySelector('.mui-popup-input input')).attr({maxlength:"6"});
            }
            checkPassword();
        }else {
            $('#pass-in').hide();
            imMsg(loginInfo,callbackIm);
        }
    }
</script>
<!--<script src="/share/js/im_visit.js"></script>-->
<script>
    $(function(){
        mui.init();
        var live_code = "<?=$info['status']?>"; // 2 直播，9.回放 ，5.结束
        var live_flag = true, //类型：直播还是回放
            coverpic_src = "", //封面路径
            live_url = '',    //移动端视频格式
            live_flv_url = '',//PC端观看视频格式为MP4
            shopping_wrap = $("#shopping-wrap"),//右侧广告
            play_btn = $(".play-btn"),
            tool_footer = $(".footer"),
            icon_ppt = $(".icon-ppt"),
            icon_open = $(".icon-open"),
            icon_close = $(".icon-close"),
            swiper_wrap = $(".swiper-out-wrap"),
            btn_talk = $("#js-start-talk"), //聊天图标
            talk_wrap = $("#js-talk-ipt-wrap"),//聊天容器
            chat_input =  $("#js-talk-ipt"),//聊天input
            tool_wrap = $(".tool-wrap"), //图标容器
            btn_send = $("#js-send-talk-btn"), //发消息按钮
            live_width = 0,
            live_height = 0,
            screen_height = window.screen.height,//屏幕高度
            andr_height = screen_height - 20, //安卓手机视频高度设为满屏减去20
            inner_height = window.innerHeight, //窗口的文档显示区的高度
            video_height = inner_height,
            u = navigator.userAgent,
            isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1,
            isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
            play_wrap = '';

        var ppt_flag = "<?=$info['annex']?>";

        if(live_code==2){
            $('#play_video').show();
            play_wrap = 'play_video';
            live_url = "<?=$url['2']?>";
            live_flv_url = "<?=$url['1']?>";
        }else if(live_code==9){
            $('#back_video').show();
            play_wrap = 'back_video';
            live_url = "<?=$url['transcodeList'][0]['url']?>";
            live_flv_url = "<?=$url['transcodeList'][1]['url']?>";
            str_control = '';
            live_flag = false;
        }else{
            $('.playback-tips-wrap').show();
            live_url = "";
            live_flv_url = "";
            return false;
        }

        var option = {
            "width" :  live_width,
            "height" : andr_height
        };

        if(iService.getUserAgent().isPC){
            option.height = inner_height;
            option.width = option.height*9/16;
            $(".main").width(option.width).css({"position":"relative","overflow":"hidden"});
        }else {
            live_flv_url = "";
        }

        var player =  new TcPlayer(play_wrap, {
            "m3u8": live_url,
            "flv":  live_flv_url, //增加了一个flv的播放地址，用于PC平台的播放
            "autoplay" : false,      //iOS下safari浏览器是不开放这个能力的
            "coverpic" : {"style": "cover", "src": coverpic_src},
            "controls":'none',
            "live": live_flag,
            "x5_player":true,
            "x5_type":"h5",
            "x5_fullscreen":true,
            "width" :  option.width,
            "height" : option.height,
            listener: function (msg) {
                // console.log('listener',msg);
                if(msg.type == 'error'){
                    window.setTimeout(function(){
//                            player.load();//进行重连
                    },5000);
                }
                var player_vcp = $(".vcp-player"),
                    player_video = $("video");

                function playToggle (){
                    if(player.playing()){
                        play_btn.hide();
                    }else {
                        play_btn.show();
                    }
                }
                playToggle();
                play_btn.off("touchend mousedown").on("touchend mousedown",function(){
                    player.play();
                });

                //显示隐藏底部元素
                function playHide (){
                    if(player.playing()){
                        tool_footer.show();
                        //存在课件的条件
                        if(btn_talk.is(':hidden')){
                            icon_ppt.hide();
                        }else if(!btn_talk.is(':hidden')&&ppt_flag){
                            icon_ppt.show();
                        }
                        /*if(isAndroid){
                            player_vcp.attr("style",'width:'+live_width+"px!important;"+'height:'+andr_height+"px!important;");
                            player_video.attr("style",'width:'+live_width+"px!important;"+'height:'+andr_height+"px!important;");
                        }*/
                    }else {
                        swiper_wrap.hide();
                        tool_footer.hide();
                        icon_ppt.hide();
                        /*if(isAndroid){
                            player_vcp.attr("style",'width:'+live_width+"px!important;"+'height:'+video_height+"px!important;");
                            player_video.attr("style",'width:'+live_width+"px!important;"+'height:'+video_height+"px!important;");
                        }*/
                    }
                }
                playHide();
            }
        });

        function userAction(){
            btn_talk.on("touchend mousedown",function(){
                tool_wrap.hide();
                talk_wrap.show();
                icon_ppt.hide();
            });

            chat_input.blur(function(){
                if(!$(this).val()){
                    talk_wrap.hide();
                    tool_wrap.show();
                    icon_ppt.show();
                }
            });
            chat_input.focus(function(){
                if(isiOS&&$("body").scrollTop()!=screen_height/2){
                    setTimeout(function(){
//                    $("#share-title").html(screen_height);
                        $("body").animate({scrollTop:screen_height/2},500);
                    },500);
                }
            });

            icon_ppt.on('click',function(){
                if($(this).hasClass('icon-close')){
                    swiper_wrap.hide();
                    $(this).removeClass('icon-close')
                }else {
                    swiper_wrap.show();
                    $(this).addClass('icon-close')
                }
            });
        }
        userAction()

    });

</script>
<?php include COMMON_PATH.'/share/footer.html' ?>
</body>
</html>